<template>
	<view class="directSellingBox" v-if="isShow" :style="{ marginTop: mbConfig + 'rpx'}">
		<view class="directSellingBoxTitle">
			<view :class="{active:directSelingType==e.sellType}" @click="choseDirectSellingType(e.sellType)"
				v-for="(e,i) in tabsList" :key="i">{{e.title}}</view>
		</view>
		<view class="directSellingBoxList">
			<view class="item" v-for="(ele,ind) in productsList" :key="ind" @click="goDetail(ele)">
				<view class="pictrue">
					<view class="OverseasBox" v-if="ele.isOverseas==1">海淘</view>
					<image :src="ele.imgPath"></image>
				</view>
				<view class="text">
					<view class="title line2">
						{{ele.packageName}}
					</view>
					<view class="old-price" style="font-size:26rpx;color:#aaa;">
						{{ele.deser}}
					</view>
					<view class="price">
						<text style="font-size:24rpx;color:#222;">会员价：</text>
						<text>￥{{ ele.price || ele.currency }},</text><text style="font-size:25rpx;"> pv:</text><text>
							{{ ele.pv }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPackageCategoryList,
		getpackageListDo
	} from '@/api/directSelling.js';
	import {
		IMG_URL,
	} from '@/config/app_member.js';
	import store from '@/store';
	export default {
		name: 'directSeling',
		data() {
			return {
				mbConfig: 10,
				productIds: '',
				sortType: 1,
				selectId: 1,
				numConfig: 1,
				tempArr: [],
				directSelingType: 5,
				productsList: [],
				tabsList: [],
				isShow: false
			};
		},
		created() {},
		mounted() {
			this.getPackageCategoryList();
		},
		methods: {
			getPackageCategoryList() {
				let _this = this;
				getPackageCategoryList({
					countryId: 1,
					memberMenuId: 4
				}).then((result) => {
					let data = result.data;
					console.log("测试测试");
					_this.tabsList = data;
					if (data) {
						_this.isShow = true;
						_this.directSelingType = _this.tabsList[0].sellType
						_this.productslist();
					}
				}).catch((err) => {
					let errNew=err+"";
					return _this.$util.Tips({
						title: errNew
					});
				})
			},
			productslist() {
				let _this = this;
				getpackageListDo({
					countryId: 1,
					imgType: 1,
					saleType: this.directSelingType
				}).then((res)=>{
					let data = res.data;
					data.forEach((ele, ind) => {
						if (Array.isArray(ele.pics)) {
							ele.imgPath = IMG_URL + ele.pics[0].imageName
						}
					})
					_this.productsList = data;
				}).catch((err) => {
					let errNew=err+"";
					return _this.$util.Tips({
						title: errNew
					});
				})
			},
			choseDirectSellingType(type) {
				this.directSelingType = type;
				this.productslist();
			},
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/goods_details/index_zx?packageId=${item.id}&saleType=${this.directSelingType}`
				});
			}
		}
	};
</script>

<style lang="scss">
	.directSellingBox {
		background: rgb(255, 255, 255);
		margin: 0 20rpx;
		width: calc(100% - 40rpx);
		padding-bottom: 30rpx;
		box-sizing: border-box;

		.directSellingBoxTitle {
			height: 88rpx;
			width: 100%;
			line-height: 88rpx;
			border-bottom: 1px solid #F3F3F3;
			margin-bottom: 30rpx;
			text-align:center;
			>view {
				padding: 0 50rpx;
				display: inline-block;
				vertical-align: middle;
			}

			>view.active {
				font-weight: bold;
				color: #108CCF;
			}
		}

		.directSellingBoxList {
			padding: 0 30rpx;
			box-sizing: border-box;

			.item {
				width: 100%;
				margin-bottom: 20rpx;
				background-color: #fff;
				border-radius: 20rpx;
				overflow: hidden;
				position: relative;
				display: flex;

				.pictrue {
					width: 220rpx;
					height: 220rpx;
					position: relative;

					.OverseasBox {
						width: 64rpx;
						height: 64rpx;
						text-align: center;
						line-height: 64rpx;
						background: #DC356A;
						right: 0rpx;
						top: 10rpx;
						color: #fff;
						font-size: 24rpx;
						border-radius: 50%;
						position: absolute;
						z-index: 11;
					}

					image {
						width: 100%;
						height: 100%;
						border-radius: 6rpx;
					}
				}

				.text {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					padding: 10rpx 20rpx 14rpx;
					box-sizing: border-box;

					.title {
						color: #222;
					}

					.price {
						display: flex;
						align-items: flex-end;
						color: #E93323;
						font-size: 24rpx;
						font-weight: 550;
					}
				}
			}
		}
	}
</style>
